<template>
	<view class="view-content">
		<navBar title="上报险情"></navBar>
			<view class="nav-Bar">
				<view class="nav-title">{{ dataObj.bizProjectName || "" }}</view>
				<view class="nav-item">
					<view class="nav-site">{{ formData.sectionName || "" }}/{{ formData.siteName || "" }}</view>
					<view class="nav-time">{{ dataObj.startTime2 || "" }}</view>
				</view>
			</view>
			<view class="main-box">
				<u--form labelPosition="top" :model="formData" ref="form1" labelWidth="auto">
					<u-form-item label="位置标记" @click="positionMarker">
						<u--input v-model="formData.address" disabled placeholder="位置标记" suffixIcon="map-fill">
						</u--input>
					</u-form-item>
					<u-form-item label="险情描述">
						<view class="form-item form-item-description">
							<u-textarea v-model="formData.description" placeholder="请输入内容" @blur="inputBlur" confirmType="done"></u-textarea>
							<record class="form-item-icon form-item-icon-voice" @setText="description"></record>
							<image mode="scaleToFill" class="form-item-icon form-item-icon-clear"
							 src="/static/image/login/del1.png" @click="formData.description=''"></image>
						</view>
					</u-form-item>
					<u-form-item label="上传险情照片">
						<u-upload :fileList="fileListImg" @afterRead="afterRead" @delete="deletePic" name="Img" multiple
							:maxCount="10" :previewFullImage="true" accept="image" width="80" height="80"></u-upload>
					</u-form-item>
					<commonVideoUpload class="xianqing" titleText="险情视频" :videoFileList="fileListVideo" :playVideoSrc="playVideoSrc" @clickMedias="clickMedias"
						@handleClickPreview="handleClickPreview" @closePlayVideoSrc="playVideoSrc = ''"
						@closeFile="closeFile"></commonVideoUpload>
				</u--form>
			</view>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button  @click="shareBtn" throttleTime="2000" class="button-warn">分享外链</button>
				<button  @click="submit"  :loading="isLoading" :disabled="isLoading" class="button-primary">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/utils/request'
	import {
		getSiteSave
	} from "@/api/projectName/projectName"
	import {
		getEventSave
	} from "@/api/emergency/emergencyDispatch.js"
	import {
		getToken
	} from '@/utils/auth'
	import {
		getPicture,
		deleteImg
	} from '@/api/doc.js' //获取图片
	export default {
		data() {
			return {
				formData: {},
				fileListImg: [],
				fileListVideo: [],
				dataObj: {},     // 接受传过来的当前列数据
				playVideoSrc:'',
				isLoading:false
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('setData', (data) => {
				this.dataObj = data.data
				let param = data.data
				this.formData = param
			})
		},
		methods: {
			inputBlur(e){
				this.cursor=e.detail.cursor
			},
			description(text){
				let index=this.cursor||0
				let str=this.formData.description||""
				this.cursor+=text.length
				text=str.slice(0, index) + text + str.slice(index);
				this.$set(this.formData, "description", text)
			},
			//点击位置定位
			positionMarker() {
				console.log("点击位置定位")
				let position = this.dataObj.position || ""
				let address = this.dataObj.address || ""
				let data = position+","+address
				uni.navigateTo({
					url: `/subpackage-emergency/pages/positionMarker?position=${data}`,
					events: {
						setPosition: (data) => {
							// this.formData.address = data.data.data[0].selectAddr
							// this.formData.position = data.data.data[0].selectPosition
							console.log(data,'dddd');
							// #ifdef APP-PLUS
								this.formData.address = data.data.data[0].action.address
								this.formData.position = data.data.data[0].action.position
							// #endif
							// #ifdef MP-WEIXIN
								this.formData.address = data.data[data.data.length - 1].action.address
								this.formData.position = data.data[data.data.length - 1].action.position 
							// #endif
						}
					}
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			afterRead(event) {
				event.file.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'success',
						message: ''
					})
				})

			},
			//提交按钮
			async submit() {
				this.isLoading = true
				let fileList = [...this.fileListImg, ...this.fileListVideo]
				console.log(fileList);
				// return
				this.formData.docId=null
				for(let item of fileList){
					let formData = {}
					if (this.formData.docId) {
						formData.docId = this.formData.docId
					}
					let data = await uploadFile({
						url: "rest/doc/uploadDoc",
						formData,
						files: [{
							name: "attach",
							uri: item.url
						}],
						filePath:item.url
					})
					let res = JSON.parse(data)
					if (!res.success) {
						this.isLoading = false
						return
					}
					this.formData.docId = res.result.id
				}
				let param = {
					id: this.formData.id,
					docId: this.formData.docId,
					description: this.formData.description,
					bpId: this.formData.bpId,
					address: this.formData.address,
					position: this.formData.position,
					// creator: this.$store.getters.userName.name,
					// creatorId: this.$store.getters.userName.id,
				}

				let data2 = await getEventSave(param)
				let data3 = await getSiteSave({
					id: this.formData.siteId,
					// address: this.formData.address,
					// position: this.formData.position,
				})
				if (data2.success && data3.success) {
					this.$message("提交成功", {
						icon: "none"
					})
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('getList');
					setTimeout(() => {
						uni.navigateBack({})
						this.isLoading = false
					},1700)
				}


			},
			
			//分享按钮点击事件 todo
			shareBtn() {
				let projectId = uni.getStorageSync("isOwner") || ""
				let value = this.$config.SHARE_URL + `?token=${getToken()}&id=${this.dataObj.id}&projectId=${projectId}&page=updateDanger`
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			/** 预览文件 */
			handleClickPreview(item) {
				console.log(item, '点击视频');
				if (item.url.startsWith("_doc")) {
					item.url = 'file://' + plus.io.convertLocalFileSystemURL(item.url);
				}
				// 'http://www.w3cmap.com/try/demo_source/movie.mp4'
				this.playVideoSrc = item.url;
			},
			// 删除文件
			closeFile(file, index) {
				this.fileListVideo.splice(index, 1)
			},
			async clickMedias(e) {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					maxDuration: 60,
					success: async res => {
						console.log(res, parseInt(res.duration), '选择成功回调函数');
						if (parseInt(res.duration) > 60) {
							return uni.showToast({
								title: '上传的视频不能超过60s',
								icon: 'none',
								mask: true
							})
						}
						this.fileListVideo.push({
							url: res.tempFilePath,
							type: "video"
						})
					},
					fail: (e) => {
						console.warn('错误', e);
					},
					complete: (end) => {
						// console.log(end);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view-content {
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
	}
	.main-box {
		padding: 0 30rpx;
	}

	.form-item {
		width: 100%;
		position: relative;
	}

	.form-item-description {
		.form-item-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.form-item-icon-voice {
			position: absolute;
			z-index: 3;
			top: 10rpx;
			right: 16rpx;
			
		}
		.form-item-icon-clear{
			position: absolute;
			z-index: 2;
			right: 16rpx;
			bottom: 10rpx;
		}
	}
	.footerBtn{
		display: flex;
		.btn{
			width: 48%;
		}

	}
	.nav-Bar{
		border-top: 2rpx solid #e4e4e4;
		padding-top: 25rpx;
		border-bottom: 2rpx solid #e4e4e4;
		.nav-title{
			text-align: center;
			font-size: 32rpx;
		}
		.nav-item{
			display: flex;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			.nav-site{
				width: 50%;
				text-align: center;
			}
			.nav-time{
				width: 50%;
				text-align: center;
			}
		}
	}
	.outerbtn {
		height: 100rpx;
		position: fixed;
		bottom: 0px;
		width: 100%;
		right: 0px;
		display: flex;
		.button {
			height: 92rpx;
			line-height: 92rpx;
			background: #2F80ED;
			color: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
			position: fixed;
			bottom: 0;
		}
	}
	/deep/ .xianqing .photo-list {
		margin-left: 0px;

	}
	/deep/ .xianqing .photo-list .photo-top .photo-text {
		font-size: 30rpx;
		font-weight: normal;
	}
</style>